<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <!-- import Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2 :style="{opacity}">欢迎学习vue</h2>
            <button @click="opacity = 1">透明度设置为1</button>
            <button @click="stop">点我停止变化</button>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。
        new Vue({
            el:'#root',
            data:{
                opacity: 1,
                timer: null
            },
            methods: {
                stop(){
                    this.$destroy()
                }
            },
            // Vue 完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
            mounted(){
                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if(this.opacity <= 0){
                        this.opacity = 1
                    }
                }, 16)
            },
            beforeDestroy() {
                // triggered by this.$destroy()
                clearInterval(this.timer)
            }

        })
    </script>
</html>